<script setup>
import { Head, Link } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { 
    DocumentTextIcon,
    PencilIcon,
    ClockIcon
} from '@heroicons/vue/24/outline'

defineProps({
    pages: {
        type: Array,
        required: true
    }
})

const pageTypeMap = {
    'about': '关于页面',
    'privacy': '隐私政策',
    'terms': '服务条款',
    'faq': '常见问题'
}

// 格式化日期
const formatDate = (date) => {
    if (!date) return '未知'
    return new Date(date).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    })
}
</script>

<template>
    <AdminLayout>
        <Head title="页面管理" />

        <div class="space-y-6">
            <!-- 页面标题 -->
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">页面管理</h1>
                    <p class="mt-2 text-sm text-gray-600">
                        共 {{ pages.length }} 个页面
                    </p>
                </div>
            </div>

            <!-- 页面列表表格 -->
            <div class="overflow-hidden bg-white rounded-lg border border-gray-200 shadow-sm">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
                                    页面类型
                                </th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                    标题
                                </th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                    最后更新
                                </th>
                                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                                    <span class="sr-only">操作</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 bg-white">
                            <tr 
                                v-for="page in pages" 
                                :key="page.id" 
                                class="hover:bg-gray-50 transition-colors"
                            >
                                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                                    <div class="flex items-center gap-x-3">
                                        <div class="h-10 w-10 flex-shrink-0">
                                            <div class="h-10 w-10 rounded-lg bg-orange-100 flex items-center justify-center">
                                                <DocumentTextIcon class="h-6 w-6 text-orange-600" />
                                            </div>
                                        </div>
                                        <div class="min-w-0 flex-1">
                                            <div class="font-medium text-gray-900">
                                                {{ pageTypeMap[page.page_key] || page.page_key }}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-3 py-4 text-sm text-gray-500">
                                    <div class="max-w-xs truncate">
                                        {{ page.title || '无标题' }}
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                    <div class="flex items-center gap-x-1">
                                        <ClockIcon class="h-4 w-4 text-gray-400" />
                                        {{ formatDate(page.updated_at) }}
                                    </div>
                                </td>
                                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                                    <Link
                                        :href="route('admin.pages.edit', page.id)"
                                        class="inline-flex items-center gap-x-1.5 text-orange-600 hover:text-orange-500 transition-colors"
                                    >
                                        <PencilIcon class="h-4 w-4" />
                                        编辑
                                    </Link>
                                </td>
                            </tr>
                            <tr v-if="pages.length === 0">
                                <td colspan="4" class="px-6 py-12 text-center text-sm text-gray-500">
                                    <DocumentTextIcon class="mx-auto h-12 w-12 text-gray-400" />
                                    <h3 class="mt-2 font-medium text-gray-900">没有页面</h3>
                                    <p class="mt-1 text-gray-500">暂无页面内容。</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </AdminLayout>
</template> 